<!DOCTYPE html>
<html>
<head>
<title>Optical Path Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: #fff;
  }
</style>
</head>
<body>
<canvas id="opticalCanvas" width="800" height="500"></canvas>

<script>
  const canvas = document.getElementById('opticalCanvas');
  const ctx = canvas.getContext('2d');

  // Style settings
  ctx.strokeStyle = '#000';
  ctx.fillStyle = '#000';
  ctx.lineWidth = 2;
  ctx.font = 'italic 24px Times New Roman';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'bottom';

  // Coordinates
  const centerY = canvas.height / 2;
  const s_x = 200;
  const lens_x = 450;
  const mirror_x = 700;
  const lens_height = 180;
  const mirror_height = 240;

  // Draw Principal Axis
  ctx.beginPath();
  ctx.moveTo(50, centerY);
  ctx.lineTo(750, centerY);
  ctx.stroke();

  // Draw point S'
  ctx.beginPath();
  ctx.arc(s_x, centerY, 4, 0, 2 * Math.PI);
  ctx.fill();
  ctx.fillText("S'", s_x, centerY - 15);

  // Draw Plano-Convex Lens
  ctx.beginPath();
  // The lens is thin, so we draw the plano and convex surfaces close together.
  // The problem statement says the distance between surfaces is negligible.
  // We'll draw the convex arc starting from the top and bottom of the plano line.
  ctx.moveTo(lens_x, centerY - lens_height / 2);
  ctx.lineTo(lens_x, centerY + lens_height / 2);
  ctx.quadraticCurveTo(lens_x + 30, centerY, lens_x, centerY - lens_height / 2);
  ctx.stroke();

  // Draw Plane Mirror
  ctx.beginPath();
  ctx.moveTo(mirror_x, centerY - mirror_height / 2);
  ctx.lineTo(mirror_x, centerY + mirror_height / 2);
  ctx.stroke();

  // Draw hatching for the mirror's back side
  ctx.save();
  ctx.lineWidth = 1.5;
  const hatch_length = 12;
  const hatch_spacing = 15;
  for (let y = centerY - mirror_height / 2; y <= centerY + mirror_height / 2; y += hatch_spacing) {
    ctx.beginPath();
    ctx.moveTo(mirror_x, y);
    ctx.lineTo(mirror_x + hatch_length, y - hatch_length);
    ctx.stroke();
  }
  ctx.restore();

  // Draw dimension line for l
  const dim_y = centerY + 100;
  const tick_h = 12;
  const center_x = (s_x + lens_x) / 2;
  const arrow_length = 40;
  const arrow_size = 8;
  const gap = 15;

  ctx.beginPath();
  // Main horizontal line with T-bars at the ends
  ctx.moveTo(s_x, dim_y);
  ctx.lineTo(lens_x, dim_y);
  ctx.moveTo(s_x, dim_y - tick_h);
  ctx.lineTo(s_x, dim_y + tick_h);
  ctx.moveTo(lens_x, dim_y - tick_h);
  ctx.lineTo(lens_x, dim_y + tick_h);
  ctx.stroke();

  // Draw arrows on top of the line, pointing outwards from the center
  ctx.beginPath();
  // Left arrow
  const left_arrow_start_x = center_x - gap;
  const left_arrow_end_x = left_arrow_start_x - arrow_length;
  ctx.moveTo(left_arrow_start_x, dim_y);
  ctx.lineTo(left_arrow_end_x, dim_y);
  ctx.moveTo(left_arrow_end_x + arrow_size, dim_y - arrow_size * 0.6);
  ctx.lineTo(left_arrow_end_x, dim_y);
  ctx.lineTo(left_arrow_end_x + arrow_size, dim_y + arrow_size * 0.6);

  // Right arrow
  const right_arrow_start_x = center_x + gap;
  const right_arrow_end_x = right_arrow_start_x + arrow_length;
  ctx.moveTo(right_arrow_start_x, dim_y);
  ctx.lineTo(right_arrow_end_x, dim_y);
  ctx.moveTo(right_arrow_end_x - arrow_size, dim_y - arrow_size * 0.6);
  ctx.lineTo(right_arrow_end_x, dim_y);
  ctx.lineTo(right_arrow_end_x - arrow_size, dim_y + arrow_size * 0.6);
  ctx.stroke();

  // Label 'l'
  ctx.fillText("l", center_x, dim_y - 8);

</script>
</body>
</html>